<template>
	<view>
		<view class="pop_top">
			<view class="flex">
				<view class="img">
					<image :src="info.cover" mode="aspectFill"></image>
				</view>
				<view class="flex_r">
					<view class="tit">{{ info.name }}</view>
					<view class="">
						<view class="price">
							<text>{{ info.points }}</text>
							稻穗值
							<span v-if="info.price != 0">
								+
								<text>{{ info.price }}</text>
								{{ info.priceType == 1 ? '元' : '快递费' }}
							</span>
						</view>
						<view class="flex_jc_sb ss">
							<view class="">
								已选：
								<text>{{ info.specs }}</text>
							</view>
							<view class="">x1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="expressinfo">
			<view class="title flex">
				<view class="x"></view>
				填写收货地址
			</view>
			<view class="item flex">
				<view class="text_l">收货人</view>
				<view class="text_r">
					<input v-model="params.userName" type="text" placeholder="请输入收货人姓名" placeholder-class="input_text" />
				</view>
			</view>
			<view class="item flex">
				<view class="text_l">联系电话</view>
				<view class="text_r">
					<input v-model="params.userPhone" type="number" maxlength="11" placeholder="请输入联系电话" placeholder-class="input_text" />
				</view>
			</view>
			<view class="item flex">
				<view class="text_l">所在地区</view>
				<view class="text_r">
					<region @regionStr="regionchange"></region>
				</view>
			</view>
			<view class="item flex">
				<view class="text_l">详细地址</view>
				<view class="text_r">
					<textarea v-model="params.userAddress" auto-height="true" type="text" placeholder="请填写详细地址" placeholder-class="input_text" />
				</view>
			</view>
		</view>

		<view class="pay">
			<view class="title">支付方式</view>
			<view class="item flex_jc_sb">
				<view class="flex">
					<image src="/static/shop1.png" mode=""></image>
					稻穗值
				</view>
				<view class="">{{ num }}</view>
			</view>
			<view class="item flex_jc_sb" v-if="info.price != 0">
				<view class="flex">
					<image src="/static/shop3.png" mode=""></image>
					微信支付
				</view>
				<view class="">
					<image class="i1" src="/static/select_a.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns active" @click="handleConfirm">
					<text>{{ info.points }}</text>
					稻穗值
					<span v-if="info.price != 0">
						+
						<text>{{ info.price }}</text>
						{{ info.priceType == 1 ? '元' : '快递费' }}
					</span>
					立即兑换
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getConfig } from '@/api/login.js';
import { getData } from '@/api/user.js';
import { createOrder } from '@/api/shop.js';
import { toast, showConfirm,showLoad,hideLoad } from '@/utils/common.js';
const params = reactive({
	id: undefined, // 商品ID
	specs: '', // 商品规格
	userName: '', // 收货人
	userPhone: '', // 联系电话
	userProvince: '', // 所在地区 省
	userCity: '', // 所在地区 市
	userCounty: '', // 所在地区 区县
	userAddress: '' // 详细地址
});
const handleConfirm = () => {
	// 表单校验
	if (!params.userName) {
		toast('请输入收货人姓名');
		return;
	}
	if (!params.userPhone) {
		toast('请输入联系电话');
		return;
	}
	// 手机号格式校验
	const phoneReg = /^1[3-9]\d{9}$/;
	if (!phoneReg.test(params.userPhone)) {
		toast('请输入正确的手机号码');
		return;
	}
	if (!params.userProvince || !params.userCity || !params.userCounty) {
		toast('请选择所在地区');
		return;
	}
	if (!params.userAddress) {
		toast('请输入详细地址');
		return;
	}
	createOrder(params).then((res) => {
		if (res.code == 200) {
			if (res.data.pay) {
				showLoad('支付加载中....')
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp:res.data.payment.timeStamp,
					nonceStr:res.data.payment.nonceStr,
					package: res.data.payment.packageVal,
					signType:res.data.payment.signType,
					paySign: res.data.payment.paySign,
					success: (res) => {
						uni.navigateTo({
							url: '/mypage/more/withdrawYes?title=兑换完成'
						});
					},
					fail: (err) => {
						console.log('支付失败:', err);
						hideLoad()
						// 支付失败处理
						if (err.errMsg === 'requestPayment:fail cancel') {
							toast('您取消了支付');
						} else {
							toast('支付失败，请重试');
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/mypage/more/withdrawYes?title=兑换完成'
				});
			}
		}
	});
};
const regionchange = (e) => {
	let list = e.split('/');
	if (list.length != 0) {
		params.userProvince = list[0];
		params.userCity = list[1];
		params.userCounty = list[2];
	}
};
const info = reactive({});
const points = ref(0);
const num = ref(0);
onLoad(() => {
	getData({}).then((res) => {
		if (res.code == 200) {
			points.value = res.data.points;
			getConfig({}).then((res) => {
				if (res.code == 200) {
					num.value = Math.max(points.value - res.data.mallNotUseUserPoints, 0);
				}
			});
		}
	});
	if (uni.getStorageSync('productInfo')) {
		Object.assign(info, uni.getStorageSync('productInfo'));
		params.id = info.id;
		params.specs = info.specs;
		if (info) {
			uni.removeStorageSync('productInfo');
		}
	}
});
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.pop_top {
	width: 710rpx;
	height: 200rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1px solid #d1d1d6;
		margin-right: 20rpx;
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
	.flex_r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 160rpx;
		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #1b1b1b;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; //几行就填几
			-webkit-box-orient: vertical;
		}
		.price {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #75613e;
			text-align: justified;
			text {
				font-family: 'DIN-BOLD';
				font-weight: 500;
				font-size: 40rpx;
				color: #892b1b;
				margin-right: 6rpx;
			}
		}
		.ss {
			margin-top: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #1b1b1b;
			text {
				color: #892b1b;
			}
		}
	}
}
.expressinfo {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1b1b1b;
		margin-bottom: 20rpx;
		.x {
			width: 0rpx;
			height: 20rpx;
			border: 4rpx solid #75613e;
			margin-right: 10rpx;
		}
	}
	.item {
		min-height: 80rpx;
		.text_l {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1b1b1b;
			width: 150rpx;
		}
		.text_r {
			flex: 1;
			input {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #75613e;
				height: 80rpx;
				line-height: 80rpx;
			}
			textarea {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #75613e;
				line-height: 1.4;
				min-height: 60rpx; // 最小高度，确保初始状态不塌陷
				padding: 0;
				line-height: 1.4;
				outline: none;
				resize: none;
			}
		}
	}
}
.pay {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1b1b1b;
		margin-bottom: 20rpx;
	}
	.item {
		height: 80rpx;
		image {
			width: 52rpx;
			height: 52rpx;
			margin-right: 18rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		.i1 {
			width: 32rpx;
			height: 32rpx;
			margin-right: 0rpx;
		}
	}
}
</style>
